<template>
  <view class="settings-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <text class="page-title">设置</text>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 设置项列表 -->
    <view class="settings-list">
      <!-- 个人信息 -->
      <view class="setting-item" @click="goToPersonalInfo">
        <view class="setting-icon personal-icon">
          <text class="iconfont-v2 icon-solid-person"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">个人信息</text>
          <text class="setting-desc">头像、昵称、收货地址等</text>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>

      <!-- 账户与安全 -->
      <view class="setting-item" @click="goToAccountSecurity">
        <view class="setting-icon security-icon">
          <text class="iconfont-v2 icon-anquan"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">账户与安全</text>
          <text class="setting-desc">修改密码、修改手机号、账号绑定管理</text>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>

      <!-- 支付设置 -->
      <view class="setting-item" @click="goToPaymentSettings">
        <view class="setting-icon payment-icon">
          <text class="iconfont-v2 icon-zhifushenqing"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">支付设置</text>
          <text class="setting-desc">支付方式、支付密码管理</text>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>

      <!-- 通知设置 -->
      <view class="setting-item">
        <view class="setting-icon notification-icon">
          <text class="iconfont-v2 icon-tongzhi"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">通知设置</text>
          <text class="setting-desc">推送通知、消息提醒</text>
        </view>
        <view class="setting-toggle" @click="toggleNotifications">
          <view class="toggle-switch" :class="{ active: notificationsEnabled }">
            <view class="toggle-slider"></view>
          </view>
        </view>
      </view>

      <!-- 帮助与反馈 -->
      <view class="setting-item" @click="goToFAQ">
        <view class="setting-icon help-icon">
          <text class="iconfont-v2 icon-wenhao"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">帮助与反馈</text>
          <text class="setting-desc">常见问题、意见反馈</text>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>

      <!-- 关于我们 -->
      <view class="setting-item" @click="goToAbout">
        <view class="setting-icon about-icon">
          <text class="iconfont-v2 icon-guanyu"></text>
        </view>
        <view class="setting-content">
          <text class="setting-title">关于我们</text>
          <text class="setting-desc">版本信息、用户协议、隐私政策</text>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">
        <text>退出登录</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 响应式数据
      notificationsEnabled: true
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToPersonalInfo() {
      console.log('跳转到个人信息页面');
      uni.showToast({
        title: '跳转到个人信息页面',
        icon: 'none'
      });
      // 这里可以跳转到个人信息编辑页面
      // uni.navigateTo({ url: '/pages/fast/personal-info' });
    },
    goToAccountSecurity() {
      console.log('跳转到账户与安全页面');
      uni.showToast({
        title: '跳转到账户与安全页面',
        icon: 'none'
      });
      // 这里可以跳转到账户安全设置页面
      // uni.navigateTo({ url: '/pages/fast/account-security' });
    },
    goToPaymentSettings() {
      console.log('跳转到支付设置页面');
      uni.showToast({
        title: '跳转到支付设置页面',
        icon: 'none'
      });
      // 这里可以跳转到支付设置页面
      // uni.navigateTo({ url: '/pages/fast/payment-settings' });
    },
    toggleNotifications() {
      this.notificationsEnabled = !this.notificationsEnabled;
      console.log('通知设置:', this.notificationsEnabled ? '开启' : '关闭');
      
      // 这里可以添加通知设置的API调用
      if (this.notificationsEnabled) {
        uni.showToast({
          title: '通知已开启',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '通知已关闭',
          icon: 'success'
        });
      }
    },
    goToFAQ() {
      console.log('跳转到帮助与反馈页面');
      uni.showToast({
        title: '跳转到帮助与反馈页面',
        icon: 'none'
      });
      // 这里可以跳转到帮助页面
      // uni.navigateTo({ url: '/pages/fast/faq' });
    },
    goToAbout() {
      console.log('跳转到关于我们页面');
      uni.showToast({
        title: '跳转到关于我们页面',
        icon: 'none'
      });
      // 这里可以跳转到关于页面
      // uni.navigateTo({ url: '/pages/fast/about' });
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户确认退出登录');
            // 这里可以添加退出登录的逻辑
            uni.showToast({
              title: '退出成功',
              icon: 'success'
            });
            // 跳转到登录页面
            uni.reLaunch({
              url: '/pages/fast/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 40rpx;
}

.header-nav {
  background: white;
  padding: 20rpx 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .back-icon {
        font-size: 32rpx;
        color: #333;
      }
    }

    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .more-icon {
        font-size: 32rpx;
        color: #333;
      }
    }
  }
}

.settings-list {
  background: white;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .setting-item {
    display: flex;
    align-items: center;
    padding: 40rpx;
    border-bottom: 2rpx solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background: #f8f9fa;
    }

    .setting-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;

      .iconfont-v2 {
        font-size: 36rpx;
        color: white;
      }

      &.personal-icon {
        background: #ED6567;
      }

      &.security-icon {
        background: #FF6B35;
      }

      &.payment-icon {
        background: #50C878;
      }

      &.notification-icon {
        background: #FFD700;
      }

      &.help-icon {
        background: #20B2AA;
      }

      &.about-icon {
        background: #9370DB;
      }
    }

    .setting-content {
      flex: 1;

      .setting-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 8rpx;
        display: block;
      }

      .setting-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
        display: block;
      }
    }

    .arrow-icon {
      font-size: 24rpx;
      color: #ccc;
    }

    .setting-toggle {
      .toggle-switch {
        width: 80rpx;
        height: 44rpx;
        background: #e0e0e0;
        border-radius: 22rpx;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;

        &.active {
          background: #ED6567;

          .toggle-slider {
            transform: translateX(36rpx);
          }
        }

        .toggle-slider {
          width: 40rpx;
          height: 40rpx;
          background: white;
          border-radius: 50%;
          position: absolute;
          top: 2rpx;
          left: 2rpx;
          transition: all 0.3s ease;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}

.logout-section {
  margin-top: 60rpx;

  .logout-btn {
    width: 100%;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 32rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #d55a54;
    }

    text {
      color: white;
    }
  }
}
</style>